Creating a simple feedback button

A trend that has becoming more popular is having a floating feedback button on your home page so you can take advantage of your visitors opinion. The button can link to a form where the user can express their thoughts about the site or a page that allows them to vote on what features they would like to see on the site. You can mimic the feedback button for your own site with a some basic html and css.

Sneak a peek at the final product. (I hope you like the red, white and blue.)

After completing the example page I was surprise how easy this is to do. I will start out with a simple page that has a container which is centered on the page. Inside that I have a header, navigation area, content area and a footer.

<div id="container">
 <div id="header"><h2>Header Here</h2></div>
 <div id="nav">Simple Nav</div>
 <div id="content">
    <h3>Content</h3>
    <p>Words and paragraphs go here</p>
 </div>
 <div id="footer"><h4>Footer</h4></div>
</div>

Nothing crazy here just some simple divs and the following CSS. I have added some lorem ispum to the content area in my example. I do not show it in the code to save space.

 body{font:.8em/1.6 Arial, Helvetica, sans-serif ; background:#CCC;}
 img{border:none;}
 #container{width:800px; margin:0 auto; border:1px solid #666666;}
 #header,#content,#footer{margin:0; padding:20px;}
 #header{background:red;}
 #nav{background:#333333; color:white; padding:10px;}
 #content{background:white;}
 #footer{background:blue;}

Again some simple background colors so we can tell where each section is being displayed. The above makes something that looks like this.

The feedback button has text that runs vertically and I thought it would be easy to do with CSS or Javascript. However after some looking around I found a few complicated Javascript solutions that only work with specific fonts and a CSS solution that only works in IE. For ease of implementation  I find that you get a much better result if you create an image file for the text. I choose to create a simple PNG file with white letters and a slight drop shadow.

Here I show the feedback letters on different backgrounds for illustration purposes. I will use a png file where the background is transparent. This will allow for the maximum flexability. Now with the image made we can create the html and CSS needed. First lets create a div for the feedback image to be displayed in.

<div id="feedback"><a href"#"><img src="images/feedback.png" /></a></div>

I have made a div with an id of “feedback” and inside of that a hyperlink anchor tag and finally inside of that the feedback text image. This div can be placed any where on your page however I suggest that it goes toward the bottom. This will allow the more important things on your page to load first. Now for the CSS that will position this div in the correct spot.

#feedback a{ display:block; position:fixed; top:200px; right:-1px; background:green; padding:7px 5px;
 border:1px solid #030;
 border-left-color:#060;
 border-top-color:#090;
 }
 #feedback a:hover{background:#030;border:1px solid #030;}

I started off with selecting the hyperlink anchor tag with in the div “feedback”.

display:block

Because the anchor tag is not a block level item we need to tell it to display as one. This will allow the positioning to work.

position:fixed

A fixed position will plant the feedback button in one location relative to the browser window.

top:200px; right:-1px;

Top places the feedback button exactly 200 pixels from the top of the window and right places button one pixel to the right off the window. This is done so that when a one pixel border is applied it doesn’t show on the right side.

background:green;

This creates a green background for the feedback button. You can choose any color you like.

padding:7px 5px;

This creates a little padding around the image. This may or may not be necessary depending on your image.

border:1px solid #030;

Finally I created a dark green border around the feedback image. I have added other border colors to create a more three dimensional look.

The next selector uses the CSS pseudo hover class to create a rollover effect. The class changes the background to a darker green and applies the same color for the border.

I want to add that I probably didn’t need to have hyperlink anchor tag inside of a div tag. I could have selected the anchor by placing a class on it. I feel like the code is easier to read and skim when you have divs that outline what is going on. It is a matter of personal choice. It will work either way with a little CSS tweaking.

That is all there is to it. Let me know if you have any other web elements you would like to see explained or if you have any questions.

Feedback button example